<template>
  <div class="app-container">
    <!--工具栏-->
    <div class="head-container">
      <!--如果想在工具栏加入更多按钮，可以使用插槽方式， slot = 'left' or 'right'-->
      <div>
        <el-col :span="6">
          <el-input v-model="this.$props.selection.mnName" readonly>
            <template slot="prepend">题名</template>
          </el-input>
        </el-col>

        <el-col :span="6">
          <el-input v-model="this.$props.selection.id" readonly>
            <template slot="prepend">古籍文献编号</template>
          </el-input>
        </el-col>
      </div>
    </div>
    <div>
      <el-row :gutter="200" style="margin-top: 50px">
        <el-col :span="12">
          <div class="image-container">
            <el-image :src="baseApi + '/file' +this.firstPicture.path"
                      fit="fill"
                      lazy

            ></el-image>
          </div>
          <!--                      style="width: 40%; height: 40%"-->
          <!--                      style="width: 600px; height: 500px"-->
          <div style="display: flex">
            <el-button @click="prePage" circle>上一页</el-button>
            <el-button @click="nextPage" circle>下一页</el-button>
            &nbsp;&nbsp;
            <el-input style="width: 40px" v-model="currentPage"></el-input>
            &nbsp;&nbsp; &frasl; &nbsp;&nbsp;
            <el-input style="width: 40px" readonly v-model="masterPage"></el-input>
            &nbsp;&nbsp;
            <el-button @click="skip" circle>跳转</el-button>
          </div>
        </el-col>
        <el-col :span="12">
          <span>内容结构 *以下输入框请输入图片的序号，为正整数。</span>
          <el-divider></el-divider>
          <el-input v-model="inputField.coverB" style="width: 150px">
            <template slot="prepend">封面</template>
          </el-input>
          --
          <el-input v-model="inputField.coverE" style="width: 50px">
          </el-input>
          <el-input v-model="inputField.fLeafB" style="width: 150px">
            <template slot="prepend">扇页</template>
          </el-input>
          --
          <el-input v-model="inputField.fLeafE" style="width: 50px">
          </el-input>
          <br><br><br>
          <el-input v-model="inputField.cPageB" style="width: 150px">
            <template slot="prepend">版权页</template>
          </el-input>
          --
          <el-input v-model="inputField.cPageE" style="width: 50px">
          </el-input>
          <el-input v-model="inputField.gHeadingB" style="width: 150px">
            <template slot="prepend">总目</template>
          </el-input>
          --
          <el-input v-model="inputField.gHeadingE" style="width: 50px">
          </el-input>
          <br><br><br>
          <el-input v-model="inputField.pNoteB" style="width: 150px">
            <template slot="prepend">出版说明</template>
          </el-input>
          --
          <el-input v-model="inputField.pNoteE" style="width: 50px">
          </el-input>
          <el-input v-model="inputField.introductionB" style="width: 150px">
            <template slot="prepend">前言</template>
          </el-input>
          --
          <el-input v-model="inputField.introductionE" style="width: 50px">
          </el-input>
          <br><br><br>
          <el-input v-model="inputField.sequenceB" style="width: 150px">
            <template slot="prepend">序</template>
          </el-input>
          --
          <el-input v-model="inputField.sequenceE" style="width: 50px">
          </el-input>
          <el-input v-model="inputField.exampleB" style="width: 150px">
            <template slot="prepend">凡例</template>
          </el-input>
          --
          <el-input v-model="inputField.exampleE" style="width: 50px">
          </el-input>
          <br><br><br>
          <el-input v-model="inputField.pIndexB" style="width: 150px">
            <template slot="prepend">音序索引</template>
          </el-input>
          --
          <el-input v-model="inputField.pIndexE" style="width: 50px">
          </el-input>
          <el-input v-model="inputField.mBadyB" style="width: 150px">
            <template slot="prepend">正文</template>
          </el-input>
          --
          <el-input v-model="inputField.mBodyE" style="width: 50px">
          </el-input>
          <br><br><br>
          <el-input v-model="inputField.appendixB" style="width: 150px">
            <template slot="prepend">附录</template>
          </el-input>
          --
          <el-input v-model="inputField.appendixE" style="width: 50px">
          </el-input>
          <el-input v-model="inputField.backB" style="width: 150px">
            <template slot="prepend">封底</template>
          </el-input>
          --
          <el-input v-model="inputField.backE" style="width: 50px">
          </el-input>
          <br><br>
          <div>
            <el-button @click="submit">提交</el-button>
            <el-button @click="updateValue">返回</el-button>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import {mapGetters} from 'vuex'
import crudCatalogue from '@/api/literatureManagement/catalogue'
import CRUD, {presenter, header, form, crud} from '@crud/crud'
import rrOperation from '@crud/RR.operation'
import crudOperation from '@crud/CRUD.operation'
import udOperation from '@crud/UD.operation'
import pagination from '@crud/Pagination'
import {getFirstPictureById} from "@/api/literatureManagement/docPicture";
import {getNextPicture, getPrePicture, skip, totality} from "@/api/literatureManagement/docPicture";
import {addCatalogue} from "../../../api/literatureManagement/catalogue";

const defaultForm = {
  id: null,
  docId: null,
  coverB: null,
  coverE: null,
  fLeafB: null,
  fLeafE: null,
  cPageB: null,
  cPageE: null,
  gHeadingB: null,
  gHeadingE: null,
  pNoteB: null,
  pNoteE: null,
  introductionB: null,
  introductionE: null,
  sequenceB: null,
  sequenceE: null,
  exampleB: null,
  exampleE: null,
  pIndexB: null,
  pIndexE: null,
  mBadyB: null,
  mBodyE: null,
  appendixB: null,
  appendixE: null,
  backB: null,
  backE: null,
  createBy: null,
  createTime: null,
  updateBy: null,
  updateTime: null,
  remark: null,
  status: null
}
export default {
  props: {
    selection: Object
  },
  name: 'Catalogue',
  components: {pagination, crudOperation, rrOperation, udOperation},
  mixins: [presenter(), header(), form(defaultForm), crud()],
  cruds() {
    return CRUD({title: '目录管理', url: 'api/catalogue', idField: 'id', sort: 'id,desc', crudMethod: {...crudCatalogue}})
  },
  data() {
    return {
      permission: {
        add: ['admin', 'catalogue:add'],
        edit: ['admin', 'catalogue:edit'],
        del: ['admin', 'catalogue:del']
      },
      currentPage: null,
      masterPage: null,
      rules: {},
      firstPicture: null,
      currentpicture: null,
      input: '',
      disabled: false,
      disabled1: false,
      inputField: {
        coverB: '',
        coverE: '',
        fLeafB: '',
        fLeafE: '',
        cPageB: '',
        cPageE: '',
        gHeadingB: '',
        gHeadingE: '',
        pNoteB: '',
        pNoteE: '',
        introductionB: '',
        introductionE: '',
        sequenceB: '',
        sequenceE: '',
        exampleB: '',
        exampleE: '',
        pIndexB: '',
        pIndexE: '',
        mBadyB: '',
        mBodyE: '',
        appendixB: '',
        appendixE: '',
        backB: '',
        backE: ''
      }
    }
  },
  methods: {
    // 钩子：在获取表格数据之前执行，false 则代表不获取数据
    [CRUD.HOOK.beforeRefresh]() {
      return false
    },
    nextPage() {
      var str = this.currentpicture.filename.slice(0, this.currentpicture.filename.indexOf("."));
      if (str == this.masterPage) {
        this.$message('已到最后页');
      } else {
        getNextPicture(this.$props.selection.id, str).then(res => {
          this.currentpicture = res;
          this.firstPicture = res;
          this.currentPage = ++this.currentPage;
        })
      }
    },
    prePage() {
      var str = this.currentpicture.filename.slice(0, this.currentpicture.filename.indexOf("."));
      if (str === '1') {
        this.$message('已到最前页');
      } else {
        getPrePicture(this.$props.selection.id, str).then(res => {
          this.currentpicture = res;
          this.firstPicture = res;
          this.currentPage = --this.currentPage;
        })
      }

    },
    skip() {
      if (this.currentPage < 1 || this.currentPage > this.masterPage) {
        this.$message('超过图片页数范围');
      } else {
        skip(this.$props.selection.id, this.currentPage).then(res => {
          this.currentpicture = res;
          this.firstPicture = res;
        })
      }
    },
    submit() {
      addCatalogue(this.inputField).then(res => {
        console.log(res);
      })

    },
    updateValue() {
      this.$emit('update-value', 1);
    }
  },
  created() {
    getFirstPictureById(this.$props.selection.id).then(res => {
      this.firstPicture = res;
      console.log(this.firstPicture)
      this.currentpicture = res;
      this.currentPage = 1;
    }),
      totality(this.$props.selection.id).then(res => {
          this.masterPage = res;
        }
      )
  },
  computed: {
    ...
      mapGetters([
        'baseApi',
        'fileUploadApi',
        'imagesUploadApi'
      ]),
  },
}
</script>

<style scoped>
.image-container {
  width: 100%; /* 让容器宽度占满屏幕宽度 */
  position: relative;
  width: 100%; /* 或者具体的宽度值 */
  height: 500px; /* 或者具体的高度值 */
  overflow: hidden;
}

.el-image {
  max-width: 100%; /* 让图片最大宽度占满容器宽度 */
  width: 100%;
  height: 100%;
  object-fit: cover; /* 确保图片覆盖整个容器，可能会裁剪图片的一些部分 */
  position: absolute;
  top: 0;
  left: 0;
}
</style>
